import React from "react";
import { Button, Divider, Icon } from "@antmjs/vantui";
import { View, Text } from "@tarojs/components";
import "./index.less";

const TemplateQuery: React.FC = () => {
  return (
    <View className="p-4 bg-white template-query__wrapper">
      <View className="w-full">
        <View className="w-full h-[40px] truncate">
          111整个组件库是依赖开源项目 Vant Weapp 的代码经过全量编译而来
        </View>
        <View className="flex flex-row items-center justify-between text-[24px] text-slate-400 flex-nowrap">
          <View className="flex-1 h-[40px] truncate leading-6">
            [连锁销售企业总部(含仓储配送中心),普通普通普通普通普通普通普通普通普通普]
          </View>
          <View className="w-[140px] flex flex-row flex-nowrap justify-between items-center">
            <Button type="default" className="!text-green-400">
              预览
            </Button>
            <Button type="default" className="!text-blue-400">
              下载
            </Button>
          </View>
        </View>
      </View>
      <Divider hairline className="!my-[16px]" />
      <View className="w-full">
        <View className="w-full h-[40px] truncate">
          2222222整个组件库是依赖开源项目 Vant Weapp 的代码经过全量编译而来
        </View>
        <View className="flex flex-row items-center justify-between text-[24px] text-slate-400 flex-nowrap">
          <View className="flex-1 h-[40px] truncate leading-6">
            [连锁销售企业总部(含仓储配送中心),普通普通普通普通普通普通普通普通普通普]
          </View>
          <View className="w-[140px] flex flex-row flex-nowrap justify-between items-center text-[12px]">
            <Button type="default" className="!text-green-400">
              预览
            </Button>
            <Button type="default" className="!text-blue-400">
              下载
            </Button>
          </View>
        </View>
      </View>
      <Divider hairline className="!my-[16px]" />
      <View className="w-full">
        <View className="w-full h-[40px] truncate">
          QQQQQQ整个组件库是依赖开源项目 Vant Weapp 的代码经过全量编译而来
        </View>
        <View className="flex flex-row items-center justify-between text-[24px] text-slate-400 flex-nowrap">
          <View className="flex-1 h-[40px] truncate leading-6">
            [连锁销售企业总部(含仓储配送中心),普通普通普通普通普通普通普通普通普通普]
          </View>
          <View className="w-[140px] flex flex-row flex-nowrap justify-between items-center">
            <Button type="default" className="!text-green-400">
              预览
            </Button>
            <Button type="default" className="!text-blue-400">
              下载
            </Button>
          </View>
        </View>
      </View>
      <Divider hairline className="!my-[16px]" />
      <View className="flex flex-row items-center justify-center gap-1 py-2 text-center flex-nowrap">
        <Text>查看更多</Text>
        <Icon name="arrow" size="16px" className="icon" color="#666"></Icon>
      </View>
    </View>
  );
};

export default TemplateQuery;
